import React, {useEffect, useState} from "react"
import {
  Row,
  Col,
  FormGroup,
  Input,
} from "reactstrap"
import {
  Search,
  Menu, Check, Star, Info, Trash, Repeat
} from "react-feather"
import "../../../assets/scss/plugins/forms/react-select/_react-select.scss"
import {connect} from "react-redux";
import Paginate from "../../../components/@vuexy/paginate";
import {deleteTask, getTasks, updateTaskElement} from "../../../redux/actions/tasks";
import Checkbox from "../../../components/@vuexy/checkbox/CheckboxesVuexy";
import {SET_TASK_FIELD} from "../../../redux/constants/tasks";
import {setFieldData, setFieldIdData} from "../../../redux/actions/helper";

const sortOptions = [
  {
    value: "featured",
    label: "Featured"
  },
  {
    value: "lowest",
    label: "Lowest"
  },
  {
    value: "highest",
    label: "Highest"
  }
]

const Content = (props) => {
  const {meta, tasks, reqParams, params} = props;
  const {getTasks, setFieldData, updateTaskElement, deleteTask, setFieldIdData} = props;
  const [search, setSearch] = useState('');
  const [requestTime, setRequestTime] = useState(null);


  const onPageChange = page => {
    setFieldData(SET_TASK_FIELD, 'reqParams', {...reqParams, page: page})
  }

  useEffect(() => {

    clearTimeout(requestTime);
    setRequestTime(null);
    setRequestTime(setTimeout(() => {
      getTasks({...reqParams, search: search})
    }, 700))

  }, [search])

  return (
    <div className="shop-content">
      <Row>
        <Col sm="12">
          <div className="ecommerce-header-items">
            <div className="result-toggler w-25 d-flex align-items-center">
              <div className="shop-sidebar-toggler d-block d-lg-none">
                <Menu
                  size={26}
                  onClick={() => props.mainSidebar(true)}
                />
              </div>
            </div>
          </div>
        </Col>
        <Col sm="12">
          <div className="ecommerce-searchbar mt-2">
            <FormGroup className="position-relative">
              <Input
                className="search-product"
                placeholder="Search Here..."
                value={search}
                onChange={e => setSearch(e.target.value)}
              />
              <div className="form-control-position">
                <Search size={22}/>
              </div>
            </FormGroup>
          </div>
        </Col>
      </Row>
      <Row>
        {
          tasks.map(value => {
            return <Col key={value.id} xs={12} className="items">
              <div className="item py-1 justify-content-between d-sm-flex">
                <div className="pr-0 pr-sm-2 flex-grow-1 " onClick={() => setFieldIdData(SET_TASK_FIELD, 'params', {
                  ...params,
                  task_id: value.id,
                  isOpenModal: true
                })}>
                  <div className="d-flex align-items-center flex-grow-1 flex-wrap">
                    <Checkbox
                      className="mr-1"
                      color="primary"
                      icon={<Check className="vx-icon" size={16}/>}
                      checked={value.completed}
                      value={value.id}
                      onChange={e => {
                        updateTaskElement(value.id, {completed: e.target.checked}, reqParams)
                      }}
                      onClick={e => e.stopPropagation()}
                    />
                    <h6 className={`m-0 mr-2 ${value.completed ? 'line-through' : ''}`}>{value.name}</h6>
                    <div className="d-flex task-tags">
                      {
                        value.tags && value.tags.data.map(tag => {
                          return <div className="d-flex task-tag align-items-center mr-1">
                            <p className="m-0">{tag.name}</p>
                            <div className="tag-badge ml-1" style={{backgroundColor: tag.color}}/>
                          </div>
                        })
                      }
                    </div>
                  </div>
                  <p className={`description pb-1 m-0 ${value.completed ? 'line-through' : ''}`}>{value.description}</p>
                </div>
                <div className="d-flex align-items-center actions">
                  <Star onClick={() => updateTaskElement(value.id, {starred: !value.starred}, reqParams)} size={20}
                        className={`mr-1 star-btn ${value.starred ? 'active' : ''}`}/>
                  <Info onClick={() => updateTaskElement(value.id, {important: !value.important}, reqParams)} size={20}
                        className={`mr-1 info-btn ${value.important ? 'active' : ''}`}/>
                  {
                    !value.trashed &&
                    <Trash onClick={() => updateTaskElement(value.id, {trashed: true}, reqParams)} size={20}
                           className={`mr-1 trash-btn`}/>
                  }
                  {
                    value.trashed === 1 && <Trash onClick={() => deleteTask(value.id, reqParams)} size={20}
                                                  className={`mr-1 trash-btn`}/>
                  }
                  {
                    value.trashed === 1 &&
                    <Repeat onClick={() => updateTaskElement(value.id, {trashed: false}, reqParams)} size={20}
                            className={`mr-1 repeat-btn`}/>
                  }
                </div>
              </div>
            </Col>
          })
        }
      </Row>
      <Paginate pagination={meta.pagination} onPageChange={onPageChange}/>
    </div>
  )
}


const mapStateToProps = state => ({
  tasks: state.tasks.tasks,
  meta: state.tasks.meta,
  reqParams: state.tasks.reqParams,
  params: state.tasks.params,
});
export default connect(mapStateToProps, {
  getTasks,
  setFieldData,
  updateTaskElement,
  deleteTask,
  setFieldIdData
})(Content)

